<template>
	<view class="wrap">
		<u-navbar :border-bottom="false" title="修改地址" back-icon-color="#ffffff" :background="{background:'#2149c3'}"
		 title-color="#ffffff"></u-navbar>
		<view class="top">
			<view class="item">
				<view class="left">收货人</view>
				<input type="text" placeholder-class="line" placeholder="请填写收货人姓名" v-model="shr_name" />
			</view>
			<view class="item">
				<view class="left">手机号码</view>
				<input type="text" placeholder-class="line" placeholder="请填写收货人手机号" v-model="shr_photo" />
			</view>
			<view class="item" @tap="showRegionPicker">
				<view class="left">所在地区</view>
				<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" v-model="show_addr"/>
			</view>
			<view class="item address">
				<view class="left">详细地址</view>
				<textarea type="text" placeholder-class="line" placeholder="街道、楼牌等" v-model="shr_address"/>
			</view>
			<!-- <view class="site-clipboard">
				<textarea placeholder-class="line" value="" placeholder="粘贴文本,可自动识别姓名和地址等" />
				<view class="clipboard">
					地址粘贴板
					<u-icon name="arrow-down" class="icon" :size="20"></u-icon>
				</view>
			</view> -->
		</view>
		<view style="padding: 20rpx;background-color: #FFFFFF;">
			<u-button text="修改地址" :custom-style="customStyle" @click="editAddress">修改地址</u-button>
		</view>
		<view style="padding: 20rpx;background-color: #FFFFFF;">
			<u-button text="删除地址" :custom-style="customredStyle" @click="isDel">删除地址</u-button>
		</view>
		<!-- <view class="bottom">
			<view class="tag">
				<view class="left">标签</view>
				<view class="right">
					<text class="tags">家</text>
					<text class="tags">公司</text>
					<text class="tags">学校</text>
					<view class="tags plus"><u-icon size="22" name="plus"></u-icon></view>
				</view>
			</view>
			<view class="default">
				<view class="left">
					<view class="set">设置默认地址</view>
					<view class="tips">提醒：每次下单会默认推荐该地址</view>
				</view>
				<view class="right"><switch color="red" @change="setDefault" /></view>
			</view>
		</view> -->
		<u-picker mode="region" ref="uPicker" v-model="show" @confirm="confirmAddress" />
		<u-toast ref="uToast" />
		<u-modal v-model="qdshow" :content="content" @confirm="delAddress" :show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	var _self;
	import {
			mapState,
			mapMutations
	} from 'vuex';
export default {
	data() {
		return {
			objList:{},
			customStyle:{
				backgroundColor:'#2149c3',
				color:'#ffffff'
			},
			customredStyle:{
				backgroundColor:'#fa3534',
				color:'#ffffff'
			},
			content:'是否确定删除？',
			qdshow: false,
			show: false,
			province:'',
			city:'',
			area:'',
			show_addr:'',
			addr_all:'',
			shr_name:'',
			shr_photo:'',
			shr_address:'',
			xgid:0,
		};
	},
	computed: {
		...mapState(['userInfo', 'hasLogin', 'scene', 'openid'])
	},
	onLoad:function(options){
		this.objList = JSON.parse(options.obj)
		console.log(this.objList);
		this.shr_name = this.objList.realname;
		this.shr_photo = this.objList.telephone;
		this.xgid = this.objList.id
		let all_arr=this.objList.address.split('-');
		this.province = all_arr[0];
		this.city = all_arr[1];
		this.area = all_arr[2];
		this.shr_address =  all_arr[3];
		this.show_addr =  all_arr[0] + all_arr[1] + all_arr[2];
		this.addr_all = all_arr[0] + "-" + all_arr[1] + "-" + all_arr[2];
		
	},
	methods: {
		showRegionPicker() {
			this.show = true;
		},
		confirmAddress(e){
			this.province = e.province;
			this.city = e.city;
			this.area = e.area;
			this.show_addr =  this.province.label + this.city.label + this.area.label;
			this.addr_all = this.province.label + "-" + this.city.label + "-" + this.area.label;
		},
		isDel(){
			this.qdshow = true;
		},
		delAddress(){
			uni.request({
				url: this.serverUrl + 'app/deleteAddress',
				header: {
					"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
				},
				method: 'POST',
				data: {
					id:this.xgid
				},
				success: (r) => {
					if (r.data.code == 1) {
						this.$refs.uToast.show({
							title: '删除成功！',
							type: 'success',
							isTab:true
						})
						setTimeout(()=>{
							uni.navigateBack();
						},1000)
					}
				}
			})
		},
		editAddress(){
			var reg_user = /^[\u4e00-\u9fa5]{2,4}$/;    //2-4个中文字符正则
			var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;  
			if(this.userInfo.id==0|| this.userInfo.id=="" || this.userInfo.id ==null ||this.userInfo.id==undefined){
				uni.navigateTo({
				    url: '../../pages/index/index'
				});
			}else{
				if(this.shr_name == ""){
					this.$refs.uToast.show({
						title: '请填写收货人！',
						type: 'warning',
					})
				}else if(!reg_user.test(this.shr_name)){
					this.$refs.uToast.show({
						title: '姓名只能为2-4中文！',
						type: 'warning',
					})
				}else if(this.shr_photo == ""){
					this.$refs.uToast.show({
						title: '请填写手机号！',
						type: 'warning',
					})
				}else if(!reg_tel.test(this.shr_photo)){
					this.$refs.uToast.show({
						title: '请正确填写您的手机号码！',
						type: 'warning',
					})
				}else if(this.province == "" || this.city == "" ||this.area ==""){
					this.$refs.uToast.show({
						title: '请选择地区',
						type: 'warning',
					})
				}else if(this.shr_address ==""){
					this.$refs.uToast.show({
						title: '请填写详细地址！',
						type: 'warning',
					})
				}else{
					let alladdr =this.addr_all + "-" + this.shr_address;
					console.log(this.addr_all)
					// 保存
					uni.request({
						url: this.serverUrl + 'app/editAddress',
						header: {
							"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
						},
						method: 'POST',
						data: {
							id:this.xgid,
							realName: this.shr_name,
							telephone:this.shr_photo,
							address: alladdr
						},
						success: (r) => {
							if (r.data.code == 1) {
								this.qdshow = false;
								this.$refs.uToast.show({
									title: '修改成功！',
									type: 'success',
									isTab:true
								})
								setTimeout(()=>{
									uni.navigateBack();
								},1000)
								// this.$refs.uToast.show({
								// 	title: '修改成功！',
								// 	type: 'success',
								// 	isTab:true
								// })
								// uni.navigateTo({
								// 	url:'/newpage/address/index'
								// })
								
							}
						}
					})
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .line {
	color: $u-light-color;
	font-size: 28rpx;
}
.wrap {
	background-color: #f2f2f2;
	.top {
		background-color: #ffffff;
		border-top: solid 2rpx $u-border-color;
		padding: 22rpx;
		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;
			.left {
				width: 180rpx;
			}
			input {
				text-align: left;
			}
		}
		
		.address {
			padding: 20rpx 0;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
		}
		.site-clipboard {
			padding-right: 40rpx;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;
				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.bottom {
		margin-top: 20rpx;
		padding: 40rpx;
		padding-right: 0;
		background-color: #ffffff;
		font-size: 28rpx;
		.tag {
			display: flex;
			.left {
				width: 160rpx;
			}
			.right {
				display: flex;
				flex-wrap: wrap;
				.tags {
					width: 140rpx;
					padding: 16rpx 8rpx;
					border: solid 2rpx $u-border-color;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 10rpx 20rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;
					justify-content: center;
					color: $u-content-color;
					line-height: 1;
				}
				.plus {
					//padding: 10rpx 0;
				}
			}
		}
		.default {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;
			.tips {
				font-size: 24rpx;
			}
			.right {
			}
		}
	}
}
</style>
